<!DOCTYPE html>
<html>
<body>
<p>
(a) 简谐振动方程:  x = 10sin(πt) (cm) <br>
(b) 简谐振动方程:  x = 10sin(5π/6 * t + π/6) (cm)
</p>
<canvas id="myCanvas" width="600" height="320" style="border:1px solid #ccc;"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- General settings ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = '#333';
    ctx.fillStyle = '#333';
    ctx.font = '16px Arial';

    // --- Helper function to draw an arrow ---
    function drawArrow(ctx, x1, y1, x2, y2) {
        const headlen = 8;
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Graph (a) ---
    const ox1 = 70;
    const oy1 = 160;
    const scaleT = 60;
    const scaleX = 10;

    // Draw axes for (a)
    drawArrow(ctx, ox1, oy1 + 11 * scaleX, ox1, oy1 - 11.5 * scaleX); // Y-axis
    drawArrow(ctx, ox1 - 10, oy1, ox1 + 3.0 * scaleT, oy1); // X-axis

    // Labels and ticks for (a)
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('x/cm', ox1, oy1 - 11.5 * scaleX - 5);
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('t/s', ox1 + 3.0 * scaleT + 5, oy1);
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('O', ox1 - 5, oy1 + 15);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('10', ox1 - 20, oy1 - 10 * scaleX);
    ctx.fillText('-10', ox1 - 20, oy1 + 10 * scaleX);
    ctx.textBaseline = 'top';
    ctx.fillText('1', ox1 + 1 * scaleT, oy1 + 5);
    ctx.fillText('2', ox1 + 2 * scaleT, oy1 + 5);
    ctx.fillText('(a)', ox1 + 1.2 * scaleT, oy1 + 11 * scaleX + 10);

    // Dashed lines for (a)
    ctx.save();
    ctx.setLineDash([5, 3]);
    ctx.beginPath();
    ctx.moveTo(ox1, oy1 - 10 * scaleX);
    ctx.lineTo(ox1 + 0.5 * scaleT, oy1 - 10 * scaleX);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(ox1, oy1 + 10 * scaleX);
    ctx.lineTo(ox1 + 1.5 * scaleT, oy1 + 10 * scaleX);
    ctx.stroke();
    ctx.restore();

    // Curve for (a)
    ctx.beginPath();
    ctx.moveTo(ox1, oy1);
    for (let t = 0.01; t <= 2.5; t += 0.01) {
        const x = 10 * Math.sin(Math.PI * t);
        ctx.lineTo(ox1 + t * scaleT, oy1 - x * scaleX);
    }
    ctx.stroke();

    // --- Graph (b) ---
    const ox2 = 360;
    const oy2 = 160;

    // Draw axes for (b)
    drawArrow(ctx, ox2, oy2 + 11 * scaleX, ox2, oy2 - 11.5 * scaleX); // Y-axis
    drawArrow(ctx, ox2 - 10, oy2, ox2 + 3.0 * scaleT, oy2); // X-axis

    // Labels and ticks for (b)
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('x/cm', ox2, oy2 - 11.5 * scaleX - 5);
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('t/s', ox2 + 3.0 * scaleT + 5, oy2);
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('O', ox2 - 5, oy2 + 15);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('10', ox2 - 20, oy2 - 10 * scaleX);
    ctx.fillText('5', ox2 - 20, oy2 - 5 * scaleX);
    ctx.fillText('-10', ox2 - 20, oy2 + 10 * scaleX);
    ctx.textBaseline = 'top';
    ctx.fillText('1', ox2 + 1 * scaleT, oy2 + 5);
    ctx.fillText('(b)', ox2 + 1.2 * scaleT, oy2 + 11 * scaleX + 10);

    // Dashed lines for (b)
    const t_peak_b = 0.4; // 2/5 s
    const t_trough_b = 1.6; // 8/5 s
    ctx.save();
    ctx.setLineDash([5, 3]);
    ctx.beginPath();
    ctx.moveTo(ox2, oy2 - 10 * scaleX);
    ctx.lineTo(ox2 + t_peak_b * scaleT, oy2 - 10 * scaleX);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(ox2, oy2 + 10 * scaleX);
    ctx.lineTo(ox2 + t_trough_b * scaleT, oy2 + 10 * scaleX);
    ctx.stroke();
    ctx.restore();

    // Curve for (b)
    const omega_b = 5 * Math.PI / 6;
    const phi_b = Math.PI / 6;
    ctx.beginPath();
    const x0 = 10 * Math.sin(phi_b);
    ctx.moveTo(ox2, oy2 - x0 * scaleX);
    for (let t = 0.01; t <= 2.4; t += 0.01) {
        const x = 10 * Math.sin(omega_b * t + phi_b);
        ctx.lineTo(ox2 + t * scaleT, oy2 - x * scaleX);
    }
    ctx.stroke();
</script>

</body>
</html>